<template>
  <Navbar />
  <div class="w-full relative">
     <Carousel :images="carouselImages" :interval="5000">
      <template v-slot:default="{ image }">
        <div class="carousel-item w-full h-full bg-cover bg-center" :style="{ backgroundImage: `url(${getImageUrl(image.src)})` }"></div>
      </template>
    </Carousel>
     <img class="invisible w-full object-cover" src="/src/assets/img/banner.png" alt="">
  </div>
  <div class="relative max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-5 lg:pt-[7.5rem] pt-[3.5rem] lg:pl-10 pl-2 gap-2">
    <div class="col-span-2">
      <div class="flex space-x-3.5">
        <h3 class="pl-2.5 text-[28px] leading-8 text-[#333]">企业概况</h3>
        <p class="text-sm/6 text-[#999] pt-2.5">GROUP OVERVIEW</p>
      </div>
      <div class="text-sm/8.5 text-[#999] pl-4 pt-14 pr-4 md:pr-0">
        北京玖芾国际教育咨询有限公司专业提供赴日留学、提升学历、就业等服务。公司在中日两国均设有合作公司，共同为希望赴日的同学提供专业、可靠、全周期的服务。公司自成立以来，受到众多大学、社会机构、医院以及养老院等合作单位的大力支持，合作企事业单位超过50家，服务学生数正在迅速发展。公司旨在以专业、坦诚、可靠为服务宗旨，针对不同学生的个性化需求，制定并落实最优的赴日留学、就业方案。公司于日本亦设有分支机构，可以一站式解决学生落地日本的食宿、生活等，并帮助学生尽快融入留学生活。为最大程度服务客户，公司亦提供赴日留学学生的国内就业指导服务，尽最大努力满足学生的需求，打消留学顾虑。
      </div>
      <div class="w-[134px] h-[50px] mt-5 leading-[50px] bg-100% text-center test-[#B660BE] bg-no-repeat bg-[url('/src/assets/img/btn_bg.png')] ml-3">了解更多</div>
    </div>
    <img class="col-span-1 lg:col-span-3 lg:h-[552px] h-auto pt-4 lg:pt-0 w-screen object-contain" src="/src/assets/img/info_img.png" alt="">
  </div>
  <div class="pt-12 lg:pt-32 mx-auto sm:grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3">
    <img class="h-auto block w-screen object-cover" src="/src/assets/img/server_1.png" alt="">
    <div class="flex flex-col h-0 pt-[73.125%] relative">
      <div class="absolute top-0 left-0 right-0 bottom-0 flex flex-col">
        <img class="w-full object-cover" src="/src/assets/img/server_2.png" alt="">
        <p class="flex items-center justify-center bg-[#FAF3FF] flex-1 sm:text-lg/[46px] text-xl color-[#B660BE]">高端旅游</p>
      </div>
    </div>
    <div class="flex flex-col h-0 pt-[73.125%] relative">
      <div class="absolute top-0 left-0 right-0 bottom-0 flex flex-col">
        <img class="w-full object-cover" src="/src/assets/img/server_3.png" alt="">
        <p class="flex items-center justify-center bg-[#FAF3FF] flex-1 sm:text-lg/[46px] text-xl color-[#B660BE]">名校访学</p>
      </div>
    </div>
    <div class="flex flex-col h-0 pt-[73.125%] relative">
      <div class="absolute top-0 left-0 w-full h-full flex flex-col">
        <img class="w-auto object-cover" src="/src/assets/img/server_6.png" alt="">
        <p class="flex items-center justify-center bg-[#FAF3FF] flex-1 sm:text-lg/[46px] text-xl color-[#B660BE]">高端医疗服务</p>
      </div>
    </div>
    <div class="flex flex-col h-0 pt-[73.125%] relative">
      <div class="absolute top-0 left-0 w-full h-full flex flex-col">
        <img class="w-auto object-cover" src="/src/assets/img/server_4.png" alt="">
        <p class="flex items-center justify-center bg-[#FAF3FF] flex-1 sm:text-lg/[46px] text-xl color-[#B660BE]">高端养老</p>
      </div>
    </div>
    <div class="flex flex-col h-0 pt-[73.125%] relative">
      <div class="absolute top-0 left-0 w-full h-full flex flex-col">
        <img class="w-auto object-cover" src="/src/assets/img/server_5.png" alt="">
        <p class="flex items-center justify-center bg-[#FAF3FF] flex-1 sm:text-lg/[46px] text-xl color-[#B660BE]">国内养老</p>
      </div>
    </div>
  </div>
  <p class="text-center mt-10 md:mt-[70px] lg:pt-17 text-[28px] leading-8 text-[#333]">新闻中心</p>
  <p class="text-center text-sm/8 text-[#999] ">news center</p>
  <div class="mt-10 md:mt-[70px] mx-auto max-w-[1200px]">
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
      <div>
        <img class="w-full  object-cover" src="/src/assets/img/news_1.png" alt="">
        <p class="text-base pt-5 pl-2 text-[#333]">“玖芾国际教育咨询有限公司”提供赴日留学</p>
        <p class="text-xs pt-2.5 pl-2 text-[#999]">2024-03-13  20:10:14</p>
        <p class="text-sm/7 text-[#999] pl-2 pt-2.5">北京玖芾国际教育咨询有限公司专业提供赴日留学、提升学历、就业等服务。公司在中日两国均设有合作公司，共同为希望赴日的同学提供专业</p>
      </div>
      <div>
        <img class="w-full  object-cover" src="/src/assets/img/news_1.png" alt="">
        <p class="text-base pt-5 pl-2 text-[#333]">“玖芾国际教育咨询有限公司”提供赴日留学</p>
        <p class="text-xs pt-2.5 pl-2 text-[#999]">2024-03-13  20:10:14</p>
        <p class="text-sm/7 text-[#999] pl-2 pt-2.5">北京玖芾国际教育咨询有限公司专业提供赴日留学、提升学历、就业等服务。公司在中日两国均设有合作公司，共同为希望赴日的同学提供专业</p>
      </div>
      <div>
        <img class="w-full  object-cover" src="/src/assets/img/news_1.png" alt="">
        <p class="text-base pt-5 pl-2 text-[#333]">“玖芾国际教育咨询有限公司”提供赴日留学</p>
        <p class="text-xs pt-2.5 pl-2 text-[#999]">2024-03-13  20:10:14</p>
        <p class="text-sm/7 text-[#999] pl-2 pt-2.5">北京玖芾国际教育咨询有限公司专业提供赴日留学、提升学历、就业等服务。公司在中日两国均设有合作公司，共同为希望赴日的同学提供专业</p>
      </div>
    </div>
  </div>
  <p class="text-center mt-10 md:mt-24 lg:pt-17 text-[28px] leading-8 text-[#333]">战略合作伙伴</p>
  <p class="text-center text-sm/8 text-[#999] ">cooperative partner</p>
  <div class="mt-10 md:mt-[70px] w-full bg-no-repeat bg-center bg-cover bg-[url('/src/assets/img/partner_bg.png')]">
    <div class="mx-auto pt-5 pb-5  md:pt-[66px]  md:pb-[66px] max-w-[1200px] grid xl:grid-cols-5 md:grid-cols-4 grid-cols-2 gap-2.5">
      <img class="h-auto" src="/src/assets/img/school_1.png">
      <img class="h-auto" src="/src/assets/img/school_2.png">
      <img class="h-auto" src="/src/assets/img/school_3.png">
      <img class="h-auto" src="/src/assets/img/school_4.png">
      <img class="h-auto" src="/src/assets/img/school_5.png">
    </div>
  </div>
  <Footer />
</template>
<script setup>
import Navbar from '@/components/Navbar.vue';
import Footer from '@/components/Footer.vue';
import Carousel from '@/components/Carousel.vue';
import { reactive, ref, computed } from 'vue'
let carouselImages = reactive([
  { src: 'banner.png', link: '#' },
])

const getImageUrl = image => {
  // 参数一: 相对路径
  // 参数二: 当前路径的URL
  return new URL(`/src/assets/img/${image}`, import.meta.url).href
}
</script>
